<template>
  <a-popover
    v-model="visible"
    trigger="click"
    placement="bottomRight"
    overlayClassName="header-notice-wrapper"
    :getPopupContainer="() => $refs.noticeRef.parentElement"
    :autoAdjustOverflow="true"
    :arrowPointAtCenter="true"
    :overlayStyle="{ width: '300px', top: '50px' }"
  >
    <template slot="content">
      <a-spin :spinning="loading">
        <a-tabs>
          <a-tab-pane tab="{{ $t('NoticeIconNoticeIcon.db') }}" key="1">
            <a-list-item v-bind:key="item.id" v-for="item in noticeList">
              <a style="color:#333;font-weight: bold;display: block;width:100%;" :href="item.url">{{item.text}}</a>
              <a-badge :count="item.cnt" />
            </a-list-item>
            <a-list-item v-if="noticeList.length==0">
              {{ $t('NoticeIconNoticeIcon.zw') }}
            </a-list-item>
          </a-tab-pane>
          <a-tab-pane tab="{{ $t('NoticeIconNoticeIcon.tz') }}" key="2">
            <a-list>
              <a-list-item>
                {{ $t('NoticeIconNoticeIcon.zw') }}
              </a-list-item>
<!--              <a-list-item>-->
<!--                <a-list-item-meta title="$t('NoticeIconNoticeIcon.ntjd') $t('NoticeIconNoticeIcon.qnn') $t('NoticeIconNoticeIcon.ytgdslms')" description="$t('NoticeIconNoticeIcon.ynq')">-->
<!--                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>-->
<!--                </a-list-item-meta>-->
<!--              </a-list-item>-->
<!--              <a-list-item>-->
<!--                <a-list-item-meta title="$t('NoticeIconNoticeIcon.zzmbkyqfdztzlx')" description="$t('NoticeIconNoticeIcon.ynq')">-->
<!--                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>-->
<!--                </a-list-item-meta>-->
<!--              </a-list-item>-->
            </a-list>
          </a-tab-pane>
          <a-tab-pane tab="{{ $t('NoticeIconNoticeIcon.xx') }}" key="3">
            {{ $t('NoticeIconNoticeIcon.zw') }}
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </template>
    <span @click="fetchNotice" class="header-notice" ref="noticeRef" style="padding: 0 18px">
      <audio id="audio-tips" :src="audioUrl"/>
      <a-badge :count="noticeCount">
        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
      </a-badge>
    </span>
  </a-popover>
</template>

<script>

export default {
  name: 'HeaderNotice',
  data () {
    return {
      loading: false,
      visible: false,
      noticeCount: 0,
      noticeList: [],
      audioUrl: '/static/tips.ogg',
      audioNormal: '/static/tips.ogg',
      audioReg: '/static/reg.ogg'
    }
  },
  methods: {
    fetchNotice () {
      if (!this.visible) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 500)
      } else {
        this.loading = false
      }
      this.visible = !this.visible
    },
    fetchData () {
      let url = '/get_work_tips'
      this.$http.get(url).then(res => {
        console.log(res)
        this.noticeCount = 0
        this.noticeList = []
        for (let item in res) {
          this.noticeCount += res[item]
          let resss = this.getRoute(item)
          if (resss != null) {
            resss.cnt = res[item]
            this.noticeList.push(resss)
          }
        }
        if (this.noticeList.length > 0) {
          this.playAutio()
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('NoticeIconNoticeIcon.sb'),
          description: err.message
        })
      })
    },
    getRoute (kk) {
      let obj = {}
      switch (kk) {
        case 'withdraw':
          obj.url = '/verify/withdraw'
          obj.text = this.$t('NoticeIconNoticeIcon.txsh')
          break
        case 'member':
          obj.url = '/verify/user'
          obj.text = this.$t('NoticeIconNoticeIcon.hysh')
          break
        case 'shop':
          obj.url = '/verify/shop'
          obj.text = this.$t('NoticeIconNoticeIcon.sjsh')
          break
        case 'bind':
          obj.url = '/verify/bind'
          obj.text = this.$t('NoticeIconNoticeIcon.bdsh')
          break
        case 'task':
          obj.url = '/verify/task'
          obj.text = this.$t('NoticeIconNoticeIcon.rwsh')
          break
        case 'order':
          obj.url = '/verify/order'
          obj.text = this.$t('NoticeIconNoticeIcon.ddsh')
          break
        case 'bank':
          obj.url = '/verify/bank'
          obj.text = this.$t('NoticeIconNoticeIcon.yxbdsh')
          break
        case 'bank_pay':
          obj.url = '/verify/pay_by_bank'
          obj.text = this.$t('NoticeIconNoticeIcon.yxfksh')
          break
        default:
          obj = null
          break
      }
      return obj
    },
    initTimer () {
      setInterval(() => {
        this.fetchData()
      }, 5000)
    },
    playAutio () {
      let audio = document.getElementById('audio-tips')
      if (audio) {
        audio.play()
      }
    }
  },
  mounted () {
    this.fetchData()
    // setTimeout(() => {
    //   this.initTimer()
    // })
    this.$socket.emit('connect', 1)
    this.sockets.subscribe('new_msg', (msg) => {
      msg = msg.replace(/&quot;/g, '"')
      console.log(msg)
      let data = JSON.parse(msg)
      switch (data.code) {
        case 0:
          // this.audioUrl = this.audioNormal
          this.fetchData()
          break
        case 1:
          this.$message.success(
            data.msg,
            15
          )
          this.playAutio()
          // this.audioUrl = this.audioReg
          break
        case 2:
          this.$success({
            title: '恭喜新VIP产生',
            // JSX support
            content: data.msg
          })
          this.playAutio()
          break
      }
    })
  },
  sockets: {
    // 查看socket是否渲染成功
    connect () {
      console.log(this.$t('NoticeIconNoticeIcon.ljcg'))
      this.$socket.emit('login', 1)
    },
    disconnect () {
      console.log(this.$t('NoticeIconNoticeIcon.dklj'))
    },
    reconnect () {
      console.log(this.$t('NoticeIconNoticeIcon.zxlj'))
    }
  }
}
</script>

<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
<style lang="less" scoped>
  .header-notice{
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }
  }
</style>
